/**
 * Created by fangshufeng on 2017/7/16.
 */

import  React ,{Component} from 'react';
import {
    ListView,
    View,
    Image,
    Text,
    StyleSheet,
    TouchableOpacity,
    AlertIOS,
} from 'react-native';

let  dataJson = require('./Car.json');
let Dimensions = require('Dimensions');

let screenHeight = Dimensions.get('window').height;

export  default  class TestSctionListView extends Component {

    constructor(props){
        super(props);

        //方法一
        let sectionHeaderData = (dataBlob, sectionID) => {
            return sectionID;
        };
        let rowData = (dataBlob, sectionID, rowID) => {
            return dataBlob[sectionID][rowID];
        };

        //方法二 要和下面的数据源方法二一起用
        // let sectionHeaderData = (dataBlob, sectionID) => {
        //     return dataBlob[sectionID];
        // };
        // let rowData = (dataBlob, sectionID, rowID) => {
        //     return dataBlob[sectionID+'-'+rowID];
        // };
        
        this.state={
            dataSource: new  ListView.DataSource({
                getSectionHeaderData:sectionHeaderData,
                getRowData:rowData,
                rowHasChanged:(r1,r2) => r1 !== r2,
                sectionHeaderHasChanged:(s1,s2) => s1 !== s2,
            }),
        };
    }

    render(){

        return(
            <View>
                <View style={styles.headViewStyle}>
                    <Text>头部的View</Text>
                </View>

                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    style={styles.listViewStyle}
                />
            </View>
        );
    }

    renderRow = (rowData,sectionID, rowID) => {
        return(
            <TouchableOpacity
                activeOpacity={0.9}
                onPress={()=>{this.rowDid(rowID)}}
            >
            <View style={styles.cellStyles}>
                <Image source={require('../Demo5/images/1.jpg')} style={{width:60,height:60}}/>
                <Text>{rowData.name}</Text>
            </View>
            </TouchableOpacity>
        );
    }

    rowDid = (rowID) => {
        AlertIOS.alert('点击了'+rowID +'行' );
    }

    renderSectionHeader = (sectionData, sectionID) => {
        return (
            <View style={styles.sectionStyle}>
                <Text style={{height:21,marginTop:7}}>{sectionData}</Text>
            </View>
        );
    }

    componentDidMount (){
        {this.loadData()}
    }

    loadData = () => {
            let dataBlob = {};
            let sectionID =[];
            let rowIDs = [];
            let  orginData = dataJson.data;

            //方法一
             let rowIDCras = [];
        
            for (let  i = 0; i< orginData.length;i++) {
                let  sectionItem = orginData[i];

                sectionID.push(sectionItem.title);
                let  rowItems= sectionItem.cars;
                rowIDCras[i] = [];
                rowIDs[i] = [];
                for (let  j = 0;j<rowItems.length;j++){
                    let  car = rowItems[j];
                    rowIDCras[i].push(car);
                    rowIDs[i].push(j);
                }
                dataBlob[sectionItem.title] = rowIDCras[i];
            }

            // 方法二
            // for (let  i = 0 ;i < orginData.length;i++) {
            //     sectionID.push(i);
            //     let  sectionItem = orginData[i];
            //     dataBlob[i] = sectionItem.title ;
            //
            //     let  rowItems= sectionItem.cars;
            //     rowIDs[i] = [];
            //
            //     for (let  j = 0;j<rowItems.length;j++){
            //         rowIDs[i].push(j);
            //         dataBlob[i+'-'+j] = rowItems[j];
            //     }
            //
            // }

            this.setState({
                dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionID,rowIDs),
            });
    }

}


const styles = StyleSheet.create({
    listViewStyle:{
      height:screenHeight - 100,
    },
    headViewStyle:{
        height:100,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#858586'
    },
    cellStyles:{
        flexDirection:'row',
        borderBottomWidth:0.5,
        borderBottomColor:'#E0BA80',
        alignItems:'center',
        padding:16,
    },
    sectionStyle:{
        height:35,
        backgroundColor:'#509be0',
        justifyContent:'center',
    }
}
)